<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>爱打印-iprint 文件上传</title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
		<style>
			.small {
				width: 100%;
				position: absolute;
				bottom: 0;
			}
		</style>
	</head>

	<body>
	<div th:insert="~{front/head :: header}"></div>
	<div id="ctxPath" th:src="@{/}"></div>
		<!--上传文件-->
		<div class="layui-container " style="width: 1300px;height: 800px;">
			<div class="layui-row">
				<div id="uploadPage">
					<div class="layui-row">
						<fieldset class="layui-elem-field layui-field-title">
							<legend>单击或者拖动文件到下方空白区域</legend>
						</fieldset>
						<div class="layui-upload-drag" id="upload" style="width: 95%;">
							<img th:src="@{/img/upload.png}" />
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-upload-list">
							<table class="layui-table">
								<thead>
									<tr>
										<th>文件名</th>
										<th>大小</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="demoList"></tbody>
							</table>
						</div>
					</div>
					<div class="layui-row ">
						<div class="layui-col-md2 layui-col-md-offset5">
							<button class="layui-btn layui-btn-fluid layui-btn-danger layui-btn-disabled" id="next">
								<i class="layui-icon layui-disabled">&#xe65b;</i>
								下一步
							</button>
						</div>
					</div>
					
					<div class="layui-row ">
						<fieldset class="layui-elem-field small">
							<legend>
								<span class="layui-badge-dot"></span>
								<span class="layui-badge-dot layui-bg-orange"></span>
								<span class="layui-badge-dot layui-bg-green"></span> 温馨提示
								<span class="layui-badge-dot layui-bg-green"></span>
								<span class="layui-badge-dot layui-bg-orange"></span>
								<span class="layui-badge-dot"></span>
							</legend>
							<div class="layui-field-box">
								<p>1、请先上传需要打印的材料；</p>
								<p>2、请上传word、ppt、pdf格式的文件；</p>
								<p>3、如果上传失败，请联系管理员</p>
							</div>
						</fieldset>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
		<script type="text/javascript">
			layui.use('element', function() {
                var ctxPath = document.getElementById("ctxPath").getAttribute("src");
				var element = layui.element,
					$ = layui.jquery; //导航的hover效果、二级菜单等功能，需要依赖element模块
				//监听导航点击
				$("#next").click(function(){
					location.href=ctxPath+"order/cart"
				});
			});
		</script>
		<script>
			layui.use('upload', function() {
                var ctxPath = document.getElementById("ctxPath").getAttribute("src");
				var $ = layui.jquery,
					upload = layui.upload,
					demoListView = $('#demoList'),
					uploadListIns=upload.render({
						auto: false,
						bindAction: '#doUpload',
						elem: '#upload',
						method:'POST',
						field:'file',
						url: ctxPath+'order/doUpload',
						accept: 'file',
						exts: 'pdf',
						done: function(res, index) {
							if(res.code == 0) { //上传成功
								var tr = demoListView.find('tr#upload-' + index),
									tds = tr.children();
								tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
								//清空操作按钮
								tds.eq(3).html('');
								//return delete this.files[index]; //删除文件队列已经上传成功的文件
								//下一步启用
								$("#next").removeClass("layui-btn-disabled");
							}
							this.error(index, upload);
						},
						choose: function(obj) {
							var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
							//读取本地文件
							obj.preview(function(index, file, result) {
								//$("#next").removeClass("layui-btn-disabled");
								var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-mini layui-btn-warm doUpload" id="doUpload">', '<i class="layui-icon">&#xe67c;</i>上传', '</button>', '<button class="layui-btn layui-btn-mini layui-btn-danger delete">删除</button>', '</td>', '</tr>'].join(''));
	
								//单个重传
								tr.find('.doUpload').on('click', function() {
									obj.upload(index, file);
								});
								//删除
								tr.find('.delete').on('click', function() {
									delete files[index]; //删除对应的文件
									tr.remove();
									uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
								});
								demoListView.append(tr);
							});
						}
	
				});
			});
		</script>

	</body>

</html>